﻿<template>
	<div style="padding:0px;">
		<el-form :model="dialogForm" :rules="rules" ref="dialogForm" v-if="dialogSendData.isAdd||!isList" :label-width="formLabelWidth">
			<el-card class="box-card">			  
			  <div  class="text item">				
				  	<div slot="header" class="clearfix">
			          <span style="line-height: 30px;">打款单</span>
			        </div>
			        <el-form-item label="订单号" >
				      <el-input v-model="orderDetail.orderNumber" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="经销商名称" >
				      <el-input v-model="orderDetail.dealerName" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="汽车车型" >
				      <el-input v-model="orderDetail.carName" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="汽车数量" >
				      <el-input v-model="orderDetail.amount" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="购车总价格"  class="currency">
				      <el-input :value="(orderDetail.totalPrice-0)| toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.totalPrice|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="定金金额"  class="currency">
				      <el-input :value="(orderDetail.earnest-0)| toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.earnest|convertCurrency}}</span>
				    </el-form-item>				    
				    <el-form-item label="垫资金额"  class="currency">
				      <el-input :value="(orderDetail.paymentAmount-0)| toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.paymentAmount|convertCurrency}}</span>
				    </el-form-item>				    
				    <el-form-item label="保证金金额"  class="currency">
				      <el-input :value="(orderDetail.deposit-0)| toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.deposit|convertCurrency}}</span>
				    </el-form-item>				    
				</div>
			</el-card>
		    <el-card class="box-card" style="margin-top:15px;">			  
			  <div  class="text item">				
				  	<div slot="header" class="clearfix">
			          <span style="line-height: 30px;">订单打款信息</span>
			        </div>
			         <el-form-item label="收款账户名1" >
				      <el-input v-model="orderDetail.accountName" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称1" >
				      <el-input v-model="orderDetail.openningBank" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="收款账户1" >
				      <el-input v-model="orderDetail.accountNumber" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="收款账户名2" >
				      <el-input v-model="orderDetail.accountNameBak" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="开户行名称2" >
				      <el-input v-model="orderDetail.openningBankBak" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="收款账户2" >
				      <el-input v-model="orderDetail.accountNumberBak" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    
				    <el-form-item label="初审打款备注" >
				      <el-input type="textarea" :rows=3 v-model="orderDetail.remark" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="终审打款金额"  class="currency">
				      <el-input :value="(orderDetail.remitAccountMoney-0)| toFixed2" auto-complete="off" disabled></el-input>
				      <span class="convertCurrency">{{orderDetail.remitAccountMoney|convertCurrency}}</span>
				    </el-form-item>
				    <el-form-item label="终审备注" >
				      <el-input type="textarea" :rows=3 v-model="orderDetail.finalReviewRemark" auto-complete="off" disabled></el-input>
				    </el-form-item>
				    <el-form-item label="审核备注"  v-if="!isAuditing">
				      <el-input type="textarea" :rows=3 v-model="dialogForm.checkRemark" auto-complete="off" disabled></el-input>
				    </el-form-item>				    				   
				</div>
			</el-card>
			<el-card class="box-card" style="margin-top:15px;">			  
			  <div  class="text item">				
				  	<div slot="header" class="clearfix">
			          <span style="line-height: 30px;">打款信息</span>
			        </div>
				    <el-form-item label="打款凭证"  class="is-required">
				      <!-- <qiniu  :qiniuImage="qiniuImage"  :packJson="packJson" :id="qiniuImage.id" :canDelete="dialogSendData.isAdd"></qiniu> -->
				      <qiniuO  :qiniuFile="qiniuFile"  :packJson="packJson" :id="qiniuFile.id" :canDelete="dialogSendData.isAdd"></qiniuO>
				    </el-form-item>
				    <el-form-item label="打款金额"  prop="payMoney" class="currency">
				      <el-input  v-model="dialogForm.payMoney"  @blur="FormatTwo('payMoney')" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input><!--  -->
				      <span class="convertCurrency">{{dialogForm.payMoney|convertCurrency}}</span>
				      <!-- <span class="convertCurrency">{{dialogForm.payMoney|convertCurrency}}</span> -->
				    </el-form-item>
				    <el-form-item label="打款备注" >
				      <el-input type="textarea" :rows=3 v-model="dialogForm.remark" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				     <el-form-item label="经手人"  prop="handling">
				      <el-input v-model="dialogForm.handling" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				    <el-form-item label="打款日期"  prop="payDate">
				      <el-date-picker :editable="false"   style="width:100%;"
					      v-model="dialogForm.payDate"
					      type="datetime"
					      format="yyyy-MM-dd HH:mm:ss"
					      placeholder="选择打款日期"
					      :disabled="!dialogSendData.isAdd"
					      :picker-options="startDateOpt"
					      >
					    </el-date-picker>
				    </el-form-item>
				    <el-form-item label="银行流水编号" >
				      <el-input v-model="dialogForm.bankTransaction" auto-complete="off" :disabled="!dialogSendData.isAdd"></el-input>
				    </el-form-item>
				     <el-form-item label="审核信息"  v-if="isAuditing&&!dialogSendData.isAdd">
				    	<el-radio-group v-model="dialogForm.isPass" :disabled="!isAuditing">
					      <el-radio label="true">审核通过</el-radio>
					      <el-radio label="false">审核不通过</el-radio>
					    </el-radio-group>
				    </el-form-item>
				    <el-form-item label="审核备注"  v-if="isAuditing&&!dialogSendData.isAdd" prop="checkRemark">
				      <el-input type="textarea" :rows=3 v-model="dialogForm.checkRemark" auto-complete="off" :disabled="!isAuditing"></el-input>
				    </el-form-item>	
				</div>
			</el-card>
			<div style="text-align:right;margin-top:15px;">
				 <el-button v-if="dialogSendData.isAdd" @click="returnBack">返 回</el-button>
				 <el-button v-if="!dialogSendData.isAdd" @click="returnBackList">返 回</el-button>
				 <el-button v-if="isAuditing||dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
			</div>
		</el-form>
		<div id="dialogTableBox" v-if="!dialogSendData.isAdd&&isList">
			<el-table :data="dialogTableData.data" border  >
			    <el-table-column label="订单号" width="140">
			      <template scope="scope">
			        <span >{{ scope.row.orderNumber }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="打款金额" >
			      <template scope="scope">
			        <span >{{ scope.row.payMoney | toFixed2 }}</span>
			      </template>
			    </el-table-column>			    
			    <el-table-column label="经手人" >
			      <template scope="scope">
			        <span >{{ scope.row.handling }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="打款日期" >
			      <template scope="scope">
			        <span >{{ scope.row.payDate | parseTime}}</span>
			      </template>
			    </el-table-column>
			    <!-- <el-table-column label="打款文件" >
			    			     <template scope="scope">
			    			       <span :id="'smallImg'+scope.row.id">
			    			       	<img  v-for="(item,index) in scope.row.payPic.split(',')" v-if="item!=''" class="smallImg"  @click="Viewer('smallImg'+scope.row.id)" :src='item' alt="" :key="index" >
			    			       </span> 
			    			     </template>
			    			   </el-table-column> -->			   
			    <el-table-column label="打款状态" >
			      <template scope="scope">
			        <span >{{ remitStatusMap[scope.row.checkStatus] }}</span>
			      </template>
			    </el-table-column>
			    <el-table-column label="操作" width="140">
			      <template scope="scope">
			      	<el-button v-if="scope.row.checkStatus==2" size="small" @click="editSee(scope.$index, scope.row)">编辑</el-button>
			      	<el-button v-if="userType==0&&scope.row.checkStatus==0" size="small" @click="auditingSee(scope.$index, scope.row)">审核</el-button>
			      	<el-button size="small" @click="handleSee(scope.$index, scope.row)">查看</el-button>
			      </template>
			    </el-table-column>
			</el-table>
			<p class="el-alert el-alert--success">{{'合计金额：(大写) '  }} <span>{{orderRemitTotal|convertCurrency}}</span> <span style="float:right;">(小写) <span>{{orderRemitTotal|toFixed2}}</span></span></p>
			<div class="block" style="text-align: center;margin-top: 15px;">
			    <pagination v-on:refreshSeachData="seachData"  :tableData="dialogTableData" ></pagination>
			</div>
			<span v-if="false">{{val}}</span>
			<div style="text-align:right;margin-top:15px;">
				 <el-button @click="returnBack">返 回</el-button>
			</div>
		</div>			
	</div>
</template>
<script>
    import qiniuO from '@/views/qiniu/uploadO'
    import pagination from '@/views/pagination/index'
    import agentHttp from '@/utils/agentHttp.js'//引用JS
    import {decimalTwo,require} from '@/utils/rules.js'
	export default{
		computed:{
		  val () {
		    // 依赖并返回eventHub中的val1
		    return eventHub.val
		  }
		},
		beforeDestroy(){
			eventHub.val="";
		},
		created(){
			if(!this.dialogSendData.isAdd){
				this.selectData();
			}else if (this.dialogSendData.isAdd) {
         		this.getOrderDetail();
         	}       		   
        },
		props:['dialogSendData','tableData'],
		components:{pagination,qiniuO},
		data(){			
			return{
				isList:true,
				formLabelWidth:'170px',
				//弹窗或者查看页面信息
		        dialogForm:{		 
		        	payDate:'',
		        	payMoney:''       
		        },
		        rules: {
		          payMoney:[require('打款金额')],//[{ required: true, message: '打款金额不能为空', trigger: 'blur' },{}],
		          handling:[{ required: true, message: '经手人不能为空', trigger: 'blur' }],
		          payDate:[{ required: true, message: '打款时间不能为空', trigger: 'blur',type: 'date', }],
		          checkRemark:[{ required: true, message: '审核备注不能为空', trigger: 'blur' }]
		          
		        },
		        dialogTableData:{
		        },
		         //七牛文件上传
		        qiniuFile:{
		        	id:"qiniuFile", //文件预览的id   
		        	file_url:[]    //文件上传的列表  只含有url地址
		        },		        
		        packJson:{
					maxLength:30,
					size:4   
				},
				remitStatusMap:'',
				userType:'',
				orderDetail:'',
				isAuditing:true,//是否审核
				orderRemitTotal:0,
				startDateOpt: {
			        disabledDate(time) {
			          return time.getTime() > Date.now() 
			        }
			    }
			}
		},methods:{
			seachData(){
				this.selectData();
			},
			addTodo(val){
                console.log(val)
			},
			submitConfirmForm(formName){
                this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	if(this.dialogSendData.isAdd&&this.isAuditing){
		          		this.addData();	
		          	}else if(this.dialogSendData.isAdd&&!this.isAuditing){
		          		this.editData();
		          	}else if(!this.dialogSendData.isAdd&&this.isAuditing){
		          		this.auditing();
		          	}		            
		          } else {
		            this.$nextTick(()=>{
		            	setTimeout(()=>{
		            		this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText||"提交失败");
		            	},500)
		                return false;
		          	})
		          }
		        });
			},
			//添加		    
		    addData(){
		    	this.dialogForm.payPic = this.qiniuFile.file_url.join(",");
		    	if(this.dialogForm.payPic.length<1){
		    		this.$message.warning("打款凭证未上传");
		    		return false;
		    	}
		    	this.dialogForm.carOrderId = this.dialogSendData.id;
		        agentHttp.postJson('adminApi/admin/order_remit/add',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"添加成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
			//编辑		    
		    editData(){
		    	this.dialogForm.payPic = this.qiniuFile.file_url.join(",");
		        agentHttp.putJson('adminApi/admin/order_remit/update',this.dialogForm).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"修改成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    //审核
		    auditing(){
		    	var param = {};
		    	param.id = this.dialogForm.id;
		    	param.checkRemark = this.dialogForm.checkRemark;
		    	param.isPass = this.dialogForm.isPass;
		        agentHttp.putJson('adminApi/admin/order_remit/auditing',param).then((data)=>{
		            if(data.success){  
		            	this.$emit('refreshTableData', null);
		            	this.$message.success(data.data||"审核成功");
		            	setTimeout(()=>{
		            		this.dialogSendData.dialogFormVisible=false;
		            	},500);
		            } 
		        }) 
		    },
		    //初始化
		    selectData(){
		    	var params=this.searchForm||{};
				params.page=this.dialogTableData.page||1;
				params.rows=this.dialogTableData.rows||10;
		        agentHttp.get('adminApi/admin/order_remit/query_by_order_id/'+this.dialogSendData.id+'?page='+params.page+'&rows='+params.rows).then((data)=>{
		        	if (data.success) {
		        		this.remitStatusMap = data.data.remitStatusMap;
		            	this.orderRemitTotal=data.data.orderRemitTotal?data.data.orderRemitTotal:0.00;
		            	this.userType = data.data.userType;
		            	this.dialogTableData=data.data.dialogTableData;
		        	}		            
		        }) 
		    },
		    //返回详细列表
			returnBackList(){
				this.isList=true;
			},
			//显示详细页面
			handleSee(index, row){
                this.isList=false;
                this.isAuditing = false;
                this.getOrderDetail();
                this.getOrderRemit(row.id);
			},
			//审核
			auditingSee(index, row){
                this.isList=false;
                this.isAuditing = true;
                this.getOrderDetail();
                this.getOrderRemit(row.id);
			},
			//编辑
			editSee(index, row){
                this.isList=false;
                this.isAuditing = false;
                this.dialogSendData.isAdd = true;
                this.getOrderDetail();
                this.getOrderRemit(row.id);                
			},
			//关闭弹窗
			returnBack(){
				this.dialogSendData.dialogFormVisible=false;
			},
		    //订单详细信息
		    getOrderDetail(){
		        agentHttp.get('adminApi/admin/order_remit/get_order_detail/'+this.dialogSendData.id).then((data)=>{			            
		            if (data.success) {
			          this.orderDetail=data.data;  
			        }
		        }) 
		    },
		    //打款单信息
		    getOrderRemit(id){
		        agentHttp.get('adminApi/admin/order_remit/get/'+id).then((data)=>{			            
		            if (data.success) {
			          this.dialogForm=data.data;
			          this.dialogForm.payMoney=(this.dialogForm.payMoney-0).toFixed(2);
			          this.dialogForm.payDate=new Date(this.dialogForm.payDate);
			          this.qiniuFile.file_url=data.data.payPic.split(',');
			          this.$set(this.dialogForm,'isPass','true');//为单选框赋初始值  
			        }
		        }) 
		    },
		    FormatTwo(val){
                this.dialogForm[val] = ((this.dialogForm[val]||"")-0).toFixed(2)=='NaN'?'':((this.dialogForm[val]||"")-0).toFixed(2);
		    }
		     
		}
	};
	
</script>
